import { GetLatestArticles } from '../../../api/Home/index';
import { useEffect, useState } from 'react';
import loginStore from '../../../store/Login/index';
import { Empty, List, Modal } from 'antd';
import MarkdownToJsx from '../../../components/MarkdownToJsx/MarkdownToJsx';
const LatestArticles = ({ status }) => {

    const { userInfo } = loginStore();//个人用户信息

    const [latestArticles, setLatestArticles] = useState([]);//最近发布的文章列表

    const [currentArticle, setCurrentArticle] = useState({});//当前文章详情数据

    const [isArticleDetailModal, setIsArticleDetailModal] = useState(false);//是否展示文章详情弹窗

    const showArticleDetailModal = (item) => {//开启模态框函数

        console.log(item);
        

        setCurrentArticle(item);

        setIsArticleDetailModal(true);
    }

    const handleArticleDetailModalOk = () => {//确认关闭文章详情模态框
        setIsArticleDetailModal(false);
    }

    const handleArticleDetailModalCancel = () => {//取消文章详情模态框
        setIsArticleDetailModal(false);
    }

    useEffect(() => {
        GetLatestArticles(userInfo.id).then(res => {
            // console.log(res);

            setLatestArticles(res.data.data);
        })
    }, [])

    if (status) {
        return (
            <>
                <Modal
                    width={1200}
                    title={currentArticle.title}
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={isArticleDetailModal}
                    onOk={handleArticleDetailModalOk}
                    onCancel={handleArticleDetailModalCancel}
                >
                    <MarkdownToJsx content={currentArticle.content}/>
                </Modal>
                {
                    latestArticles.length === 0 ? <Empty
                        style={{ marginTop: '20px' }}
                        description={<p style={{ fontSize: "30px" }}>您的贡献次数没不足5次,请多多发布文章哦(^_^)</p>}
                    />
                        :
                        <List
                            size="large"
                            footer={<div style={{color:"#c9c4c4"}}>@2024天枢笔记 | 数字创作服务平台</div>}
                            bordered
                            dataSource={latestArticles}
                            style={{ marginTop: '20px' }}
                            renderItem={item =>
                                <>
                                    <List.Item onClick={() => showArticleDetailModal(item)}>
                                        <p>{item.title}</p>
                                        <p>{`${item.createTime.split('T')[0]} ${item.createTime.split('T')[1]}`}</p>
                                    </List.Item>
                                </>

                            }
                        />
                }
            </>
        )
    }

}

export default LatestArticles;